HTMLify
style.css
Views: 11 | Author: huxn-webdev
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | * { padding: 0; margin: 0; box-sizing: border-box; font-family: sans-serif; } button { margin-right: -20px; padding: 15px 40px; border: 0; outline: none; border-radius: 25px; background: #333; color: #fff; font-size: 14px; cursor: pointer; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2); } .row { width: 100%; display: flex; justify-content: space-between; background: #fff; border-radius: 15px; overflow: hidden; } .col-1 .col2 { overflow: hidden; } .col-1 { display: flex; flex-direction: column; justify-content: space-around; } .col-2 img { width: 35rem; height: 100vh; margin-bottom: -5px; } .col-1 { padding: 8% 5%; position: relative; } .col-1 p { color: #777; line-height: 22px; margin: 15px 0 30px; max-width: 500px; } ul { position: absolute; bottom: 30px; } ul li { list-style: none; width: 15px; height: 15px; display: inline-block; background: #bfbfbf; border-radius: 50%; margin-right: 15px; cursor: pointer; } ul .active { background: #333; } /* JavaScript */ .zoom { animation: zoom 1s; } @keyframes zoom { 0% { transform: scale(1.2); } 100% { transform: scale(1); } } |